<template>
  <section>
    <div class="content-title">{{ title }}</div>
    <div class="menu">
      <el-segmented v-model="value" :options="options" size="large" />
    </div>
    <div v-if="value == '计时'">
      计时
    </div>
    <div class="count" v-else-if="value == '沙漏'">
      <div class="count-value">
        {{ toggleColck(count) }}
      </div>
      <div class="count-content">
        <div v-if="working">
          <el-button @click="pause" type="danger">暂停</el-button>
        </div>
        <template v-else>
          <template v-if="count == 0">
            <div>
              时间
            </div>
            <div>
              <el-select v-model="total" style="width: 100px;">
                <el-option v-for="x in timeList" :value="x.value" :label="x.label"></el-option>
              </el-select>
            </div>
            <div>
              <el-button @click="start" type="primary">开始计时</el-button>
            </div>
          </template>
          <div v-else>
            <el-button @click="restart" type="success">继续计时</el-button>
          </div>
        </template>
        <div>
          <el-button @click="reset">重置</el-button>
        </div>
      </div>
    </div>
    <div v-else-if="value == '剩余时间'" class="down">
      <div>
        {{ timeToBack }}
      </div>
      <div>
        <el-select v-model="type" style="width: 100px;" @change="selectTime">
          <el-option v-for="x in typeList" :value="x.value" :label="x.label"></el-option>
        </el-select>
      </div>
    </div>
  </section>
</template>
<script setup>
import { ref, getCurrentInstance, onUnmounted } from 'vue';
const { proxy } = getCurrentInstance()
const props = defineProps({
  title: {
    type: String,
    defalut: ''
  }
})
const options = [
  '计时', '沙漏', '剩余时间'
]
const value = ref('计时')

onUnmounted(() => {
  clearInterval(timer)
})

let timer = null
const count = ref(0)
const total = ref(3)
const working = ref(false)
const timeList = [
  { label: '三秒', value: 3 },
  { label: '十秒', value: 10 },
  { label: '三十秒', value: 30 },
  { label: '一分钟', value: 60 },
  { label: '三分钟', value: 180 },
  { label: '五分钟', value: 300 },
  { label: '三十分钟', value: 1800 },
  { label: '一小时', value: 3600 },
  { label: '二小时', value: 7200 },
  { label: '十小时', value: 36000 },
]

function reduce() {
  if (count.value == 0) {
    proxy.$element.success('计时结束')
    clearInterval(timer)
    working.value = false
    return
  }
  count.value -= 1
}

function start() {
  working.value = true
  count.value = total.value
  timer = setInterval(() => {
    reduce()
  }, 1000);
}

function restart() {
  working.value = true
  timer = setInterval(() => {
    reduce()
  }, 1000);
}

function pause() {
  working.value = false
  clearInterval(timer)
}

function zero(num) {
  return num >= 10 ? num : '0' + num
}

function toggleColck(seconds) {
  let str = ''
  if (seconds >= 0) {
    let h = parseInt(seconds / 3600)
    let min = parseInt((seconds - h * 3600) / 60)
    let sec = seconds - h * 3600 - min * 60
    str = `${zero(h)}:${zero(min)}:${zero(sec)}`
  }
  return str
}

function reset() {
  clearInterval(timer)
  working.value = false
  count.value = 0
}

const type = ref('')
const timeToBack = ref('')
const typeList = [
  { label: '上班', value: '08:30:00' },
  { label: '午饭', value: '12:00:00' },
  { label: '工作', value: '14:00:00' },
  { label: '下班', value: '17:30:00' },
  { label: '晚饭', value: '19:30:00' },
  { label: '休息', value: '23:30:00' }
]

const dateList = [
  { label: '国庆', value: '' },
]

function selectTime() {
  timer = setInterval(() => {
    createTime(type.value)
  }, 1000);
}

function today() {
  let str = ''
  let date = new Date()
  const y = date.getFullYear()
  const mo = date.getMonth() + 1
  const d = date.getDate()
  str = `${y}-${zero(mo)}-${zero(d)}`
  return str
}


function getTimeLeft(endTime) {
  let now = new Date().getTime();
  let distance = endTime - now;
  let days = Math.floor(distance / (1000 * 60 * 60 * 24));
  let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = Math.floor((distance % (1000 * 60)) / 1000);
  return { days, hours, minutes, seconds };
}

function createTime(type) {
  let endTime = ''
  if (type.includes('-')) {
    endTime = new Date(type).getTime()
  } else {
    endTime = new Date(today() + ' ' + type).getTime()
  }
  let { days, hours, minutes, seconds } = getTimeLeft(endTime)
  let timeStr = `${zero(hours)}小时${zero(minutes)}分${zero(seconds)}秒`;
  if(days == 0){
    timeToBack.value = timeStr
  }else if(hours < 0){
    timeToBack.value = `过去了` + timeStr
  }else{
    timeToBack.value = `${zero(days)}天` + timeStr
  }
}

</script>
<style scoped lang="scss">
.count-content {
  display: flex;
  justify-content: right;

  >div {
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.count-value {
  display: flex;
  font-weight: 700;
  font-size: 78px;
  margin: 10px;
  color: #fff;

  >div {
    >div {
      margin-right: 10px;
    }
  }
}

.down {
  display: flex;

  >div {
    display: flex;
    align-items: center;
    margin-right: 10px;
  }
}

.menu {
  margin-bottom: 10px;
}
</style>
